<template>
  <div class="login-view">
    <el-form class="login" :rules="rules" label-width="80px" ref="form" :model="form">
      <h2 class="login-title">灯侑会员管理系统</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item class="submit-btn">
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入login.js中导出的两个普通对象
import { login, getUserInfo } from "@/api/login";

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    };
  },

  components: {},

  methods: {
    // 在提交表单按钮的事件中进行逻辑处理
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          login(this.form.username, this.form.password).then(res => {
            const login_data = res.data;
            if (login_data.flag) {
              console.log(login_data.message);
              getUserInfo(login_data.data.token).then(res => {
                const user_Info = res.data;
                if (user_Info.flag) {
                  console.log(res);
                  // 将用户信息和token存入本地缓存
                  localStorage.setItem("user_Info", JSON.stringify(user_Info));
                  localStorage.setItem("user_token", login_data.data.token);
                  this.$router.push("/");
                } else {
                  // 查询用户信息失败
                }
              });
              this.$message({
                message: "欢迎访问灯侑后台系统",
                type: "success"
              });
              // this.$router.push("/");
            } else {
              // 登录失败的代码写在这里
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.login-view {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.login-view::before {
  background: url("../../assets/login/loginbg.jpg") no-repeat;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
  top: 0;
  left: 0;
  filter: blur(3px);
  transform: scale(1.01);
}
.login {
  position: relative;
  width: 350px;
  margin: 200px auto;
  padding: 20px 50px 20px 20px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.8);
}
.login-title {
  text-align: center;
}
.submit-btn {
  text-align: right;
}
</style>